<template>
    <div class="list-layout">
        <header class="list-layout-head" :style="{'height': isSelect ? headHeight : 'calc('+headHeight + ' + 20px)'}">
            <slot name="head"></slot>
        </header>
        <section class="list-layout-select" v-if="isSelect" :style="{'height': 'calc('+selectHeight + ' + 20px)' }">
            <div class="list-layout-select-box" :style="{'height': selectHeight}">
                <slot name="select"></slot>
            </div>
        </section>
        <section class="list-layout-box">
            <slot></slot>
        </section>
        <footer class="list-layout-foot" :style="{'height': footHeight}">
            <slot name="foot"></slot>
        </footer>
    </div>
</template>

<script setup>
    import {defineProps} from 'vue'
    const props = defineProps({
        headHeight: {// 页头的高度设置
            type: String,
            default: '58px'
        },
        selectHeight: {// 搜索部分的高度设置
            type: String,
            default: '70px'
        },
        footHeight: {// 页尾的高度设置
            type: String,
            default: '58px'
        },
        /* isSelect为false时，搜索部分将不显示 */
        isSelect: {// 是否显示搜索条件，true为显示；false为不显示
            type: Boolean,
            default: true
        }
    })
</script>

<style lang="scss" scoped>
    body{
        height: 100%;
    }
    .list-layout{
        display: flex;
        width: 100%;
        height:100%;
        flex-direction: column;
        .list-layout-select{
            margin: 0 24px;
        }
        .list-layout-select-box{
            padding: 16px 0;
            box-sizing: border-box;
            border-bottom: 1px var(--borderColor) solid;
        }
        .list-layout-box{
            margin: 0 24px;
            flex: 1;
            overflow: auto;
        }
        .list-layout-foot{
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px var(--borderColor) solid;
            margin: 0 24px;
        }
    }

</style>